<template>
  <a-spin :spinning="spinning" tip="地址获取中，请稍后...">
    <page-header-wrapper>
      <div class="a-flex a-row-center a-col-center" style="height: 60vh;width:100%;">
        <a-card v-if="!$isEmpty(href)" class="a-flex a-row-center a-col-center fz-28" style="height: 300px;width:600px;">
          <a :href="href" target="_blank">点击进入工作底图</a>
        </a-card>

        <a-empty v-else>
          <span slot="description">获取地址失败，请点击重新获取</span>
          <a-button type="primary" @click="fetchData">
            重新获取
          </a-button>
        </a-empty>
      </div>
    </page-header-wrapper>
  </a-spin>
</template>

<script>
import { getGZDThtml } from '@/api/cityReviewAndManage'
export default {
  data () {
    return {
      href: '',
      spinning: false
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.spinning = true
      getGZDThtml()
        .then((res) => {
          this.href = res.Url
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
